<template>
  <base-layout 
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    dialogWidth="600px">
    <template #searchPanel>
      <search-panel
        v-slot="{ form }"
        :selectPer="'111'"
        @search="search"
        :addPer="''"
        addTitle="新增"
        @insert="handleDataInsert('银行》银行管理')"
        @handleDataExport="handleDataExport"
        :showSearchButton="true"
        :showAddButton="true"
      >
        <el-input
          v-model="form.client"
          clearable
          placeholder="银行账户代码"
          style="width: 150px;margin-bottom: 20px;margin-top: 10px;"
        />
        <el-input
          v-model="form.client"
          clearable
          placeholder="银行账户"
          style="width: 150px;margin-bottom: 20px;margin-top: 10px;"
        />
        <el-input
          v-model="form.client"
          clearable
          placeholder="银行简称"
          style="width: 150px;margin-bottom: 20px;margin-top: 10px;"
        />
        <el-input
          v-model="form.client"
          clearable
          placeholder="银行类别"
          style="width: 150px;margin-bottom: 20px;margin-top: 10px;"
        />
        <el-input
          v-model="form.client"
          clearable
          placeholder="助记码"
          style="width: 150px;margin-bottom: 20px;margin-top: 10px;"
        />
        <CitySelect v-model="form.cityCode" placeholder="省份" />
        <el-input
          v-model="form.client"
          clearable
          placeholder="开户名称"
          style="width: 150px"
        />
        <el-input
          v-model="form.client"
          clearable
          placeholder="人行联行行号"
          style="width: 150px"
        />
        <el-input
          v-model="form.client"
          clearable
          placeholder="人行联行名称"
          style="width: 150px"
        />
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{ row }">
          <i
            class="el-icon-edit cursor"
            title="修改"
            @click="updateUser(row)"
          ></i>
        </template>
      </data-table>
    </template>

    <template #dialog>
      <dialog-data-form :value="dialogData" @operate="handleDataOperate"/>
    </template>

  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import {
  getList,
} from '@/api/pre-sale/orderManagement/newCar'
import { getDict } from '@/utils/index'
import { CarModel } from '@/components/index'
import { getStoreUser } from '@/api/after-sale/personnel/index'
import DialogDataForm from './components/DialogDataForm.vue'
export default {
  components: {
    CarModel,
    DialogDataForm
  },
  mixins: [
    baseMixin({
      idName: 'id',
      findData: getList,
      dataName: ['content', 'totalRecords']
    })
  ],
  data() {
    return {
      getInvoiceId: null,
      modelList: [],
      dataArry: [],
      getDict: getDict,
      form: {
        storeId: '',
        client: '' // 客户信息
      },
      tableColumnAttributes: [
        { name: '银行账户代码', value: 'carOrderNo', type: 'text' },
        { name: '银行账号', value: 'storeName', type: 'text' },
        { name: '银行简称', value: 'carBrandName', type: 'text' },
        { name: '银行类别', value: 'carModelName', type: 'text' },
        { name: '上级银行', value: 'vin', type: 'text' },
        { name: '助记码', value: 'clientName', type: 'text' },
        { name: '省份', value: 'clientPhone', type: 'text' },
        { name: '市', value: 'businessNo', type: 'text' },
        { name: '区、县', value: 'insuranceNo', type: 'text' },
        { name: '工作日历', value: 'insureTime', type: 'text' },
        { name: '开户行名称', value: 'headOffice', type: 'text' },
        { name: '人行联行行号', value: 'branchOffice', type: 'text' },
        { name: '人行联行名称', value: 'guaranteeSlipType', type: 'text' },
        { name: '店面名称', value: 'jqx', type: 'text' },
        { name: '状态', value: 'syx', type: 'text' },
      ],
      dict: {}
    }
  },
  methods: {
    invoice(row){
      this.getInvoiceId = row.id;
    },
    // 编辑员工信息
    updateUser(row) {
      const { id } = row
      this.$router.push({
        path: '/personnel/updataEmployee',
        query: {
          userId: id
        }
      })
    },
    //查看详情
    viewDetail(row) {
      const { id } = row
      this.$router.push({
        path: '/orderManagement/carDeatail',
        query: {
          id: id
        }
      })
    },
    //查看销售单详情
    viewSalesDetail(row) {
      const { id } = row
      this.$router.push({
        path: '/orderManagement/salesList',
        query: {
          id: id
        }
      })
    },
    // 查询
    search(form) {
      this.searchOptions = form
      this.currentPage = 1
      this.setTableData()
    },
    add() {
      this.$router.push({
        name: 'adddepositOrder',
        params: { type: 'add' }
      })
    },
    handleDataExport() {

    },
  },
  async mounted() {
    await getStoreUser().then((res) => {
      const { success, data } = res
      if (success) this.dataArry = data
    })
  }
}
</script>
<style scoped>
  .cursor {
    margin-left: 15px;
    cursor: pointer
  }
</style>
